<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/28 0028
  Time: 下午 14:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>Title</title>
    <jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>

    <style>
        .layui-form-label{
            width: 100px;
        }
        .layui-input-block {
            margin-left: 130px;
            min-height: 36px
        }
    </style>
</head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a>
          <cite>阿米巴报表</cite>
        </a>
      </span>
</div>
<div class="x-body">
<%--
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" onsubmit="return false">
            <input type="text" name="keyword1" id="keyword1" placeholder="请输入仓库名称" autocomplete="off" class="layui-input">
            &lt;%&ndash;<input type="text" name="keyword2" id="keyword2" placeholder="请输入备注" autocomplete="off" class="layui-input">
            <input type="text" name="keyword3" id="keyword3" placeholder="请输入SAP/QAD" autocomplete="off" class="layui-input">
            <input type="text" name="keyword4" id="keyword4" placeholder="请输入中文名称" autocomplete="off" class="layui-input">&ndash;%&gt;
            <button class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
        </form>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-warm" id="add"><i class="layui-icon layui-icon-add-circle-fine"></i>新增</button>
        <button class="layui-btn layui-btn-danger" id="del"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        &lt;%&ndash; <button class="layui-btn layui-btn-danger" id="import"><i class="layui-icon layui-icon-download-circle"></i>导入</button>
         <button class="layui-btn layui-btn-danger" id="export"><i class="layui-icon layui-icon-upload"></i>导出</button>
         <button class="layui-btn layui-btn-danger" id="dybq"><i class="layui-icon layui-icon-upload-drag"></i>打印标签</button>&ndash;%&gt;
    </xblock>--%>
    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>

    <c:set var="yunShu" scope="session" value="${youFei + guoQiaoFei + weiXiuFei + waiGuChe}"/>



    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <%--<thead>
        <tr>
            <th>一级</th>
            <th>二级</th>
            <th>三级</th>
            <th>明细</th>
            <th>单价</th>
            <th>金额</th>
            <th>备注</th>
        </tr>
        </thead>--%>
        <tbody>
        <tr>
            <td rowspan="21">支出（含税）（B）</td>
            <td rowspan="19">巴内支出（b1）</td>
            <td>房租</td>
            <td>房租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td contentEditable="true" id="fangZu">0</td>
            <td></td>
        </tr>
        <tr>

            <td></td>
            <td>物业</td>
            <td></td>
            <td contentEditable="true" id="wuYe">0</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>水电</td>
            <td></td>
            <td contentEditable="true" id="shuiDian">0</td>
            <td></td>
        </tr>
        <tr style="background-color: #ccc">
            <td></td>
            <td>合计</td>
            <td></td>
            <td id="fangZuHeJi">0</td>
            <td></td>
        </tr>
<script>

    var temp1 = 0;
    var temp2 = 0;
    var temp3 = 0;
    $('#fangZu').keyup(function () {
        temp1 = $('#fangZu').text()

        if (temp1 == '') {
            temp1 = 0;
        }

        $('#fangZuHeJi').text(parseFloat(temp1)+parseFloat(temp2)+parseFloat(temp3))
    });
    $('#wuYe').keyup(function () {
        temp2 = $('#wuYe').text()
        if (temp2 == '') {
            temp2 = 0;
        }
        $('#fangZuHeJi').text(parseFloat(temp1)+parseFloat(temp2)+parseFloat(temp3))
    });
    $('#shuiDian').keyup(function () {
        temp3 = $('#shuiDian').text()

        if (temp3 == '') {
            temp3 = 0;
        }
        $('#fangZuHeJi').text(parseFloat(temp1)+parseFloat(temp2)+parseFloat(temp3))
    });
</script>
        <tr>
            <td>设备</td>
            <td>货架</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>叉车&扫地车折旧</td>
            <td></td>
            <td>${chaCheZheJiu}</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>叉车租赁</td>
            <td></td>
            <td>${cheZuLin}</td>
            <td></td>
        </tr>
        <tr style="background-color: #ccc">
            <td></td>
            <td>合计</td>
            <td></td>
            <c:set var="sheBei" scope="session" value="${chaCheZheJiu + cheZuLin}"></c:set>
            <td>${chaCheZheJiu + cheZuLin}</td>
            <td></td>
        </tr>

        <tr>
            <td>人工</td>
            <td>工资</td>
            <td></td>
            <td>${gongZi}</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>社保</td>
            <td></td>
            <td>${sheBaoFei}</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>分公司经理</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>服务费</td>
            <td></td>
            <td>${fuWuFei}</td>
            <td></td>
        </tr>
        <tr style="background-color: #ccc">
            <td></td>
            <td>合计</td>
            <td></td>
            <c:set var="renGong" scope="session" value="${gongZi + sheBaoFei + fuWuFei}"/>
            <td id="renGong">${gongZi + sheBaoFei + fuWuFei}</td>
            <td></td>
        </tr>


        <tr>
            <td>运输</td>
            <td>油费</td>
            <td></td>
            <td>${youFei}</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>过桥</td>
            <td></td>
            <td>${guoQiaoFei}</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>维修费</td>
            <td></td>
            <td>${weiXiuFei}</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>外雇车</td>
            <td></td>
            <td>${waiGuChe}</td>
            <td></td>
        </tr>

        <tr style="background-color: #ccc">
            <td></td>
            <td>合计</td>
            <td></td>
            <td>${youFei + guoQiaoFei + weiXiuFei + waiGuChe}</td>
            <td></td>
        </tr>

        <tr>
            <td>其他</td>
            <td>明细+折旧${zheJiuFie}+待摊${daiTan}+其他${qiTa}</td>
            <td></td>
            <c:set var="qiTaFei" scope="session" value="${zheJiuFie + qiTa + daiTan}"/>
            <td>${qiTaFei}</td>
            <td></td>
        </tr>

        <tr>
            <td>公共分摊（b2）</td>
            <td></td>
            <td>重庆分公司+总部</td>
            <td></td>
            <td contentEditable="true" onclick="onName()"></td>
            <td>总部分摊无明细</td>
        </tr>

        <tr style="background-color: #ccc">
            <td colspan="2">合计=b1+b2</td>
            <td></td>
            <td></td>
            <c:set var = "b1Fei" scope="session" value="${sheBei + renGong + yunShu + qiTaFei}"/>
            <td>${b1Fei}</td>
            <td></td>
        </tr>

        <tr>
            <td>收益（C）</td>
            <td colspan="2">C=A${shouRuMoney}-B</td>
            <td></td>
            <td></td>
            <td>${ shouRuMoney - b1Fei}</td>
            <td></td>
        </tr>

        <tr>
            <td>项目利润率</td>
            <td colspan="4">（项目利润／收入＊100%）</td>

            <td>${( shouRuMoney - b1Fei)/shouRuMoney }</td>
            <td></td>
        </tr>

        </tbody>
    </table>


</div>

<script>

    $(function () {
        //alert("---------")


    });

</script>

<div id="addDivID" style="display:none">
    <form class="layui-form" id="addFormID" style="margin-top:20px">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">仓库：</label>
                <div class="layui-inline">
                    <select  name="warehouse">
                        <option value="租赁">蔡家</option>
                        <option value="折旧">蔡家</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">方式：</label>
                <div class="layui-inline">
                    <select  name="type" lay-filter="changType">
                        <option value="租赁">租赁</option>
                        <option value="折旧">折旧</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item" id="brand1" >
            <div class="layui-inline">
                <label class="layui-form-label">品牌：</label>
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="brand" style="width: 213px;">
                </div>
            </div>
        </div>

        <div class="layui-form-item"  id="brand2">
            <div class="layui-inline">
                <label class="layui-form-label">品牌：</label>
                <div class="layui-inline">
                    <select  name="parameter2">
                        <option value="">--请选择供应商--</option>
                        <c:forEach items="${depreciationEntity}" var="item">
                            <%--<option value="${item.id}" >${item.itemName}</option>--%>
                            <option value="${item.itemName}" >${item.itemName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">金额：</label>
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="parameter" style="width: 213px;">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-blue" id="subBtn" lay-submit lay-filter="addForm" style="margin-left: 90px; margin-bottom: 10px">提交</button>
                &emsp;&emsp;<button  class="layui-btn layui-btn-primary" style="margin-bottom: 10px">取消</button>
            </div>
        </div>
    </form>
</div>

<script>

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1'
        });
        laydate.render({
            elem: '#date2'
        });
    });

    layui.use('table', function(){
        var table = layui.table;
        var form=layui.form;
        var layer = layui.layer;

        table.render({
            elem: '#tableList'
            , url: '/amoeba/listPartA.do'
            ,totalRow: true
            ,cols: [[
                {field: 'level1', title: '一级',width: 150},
                {field: 'level2', title: '二级', totalRowText: '合计=a1+a2',width:150}
                ,{field: 'level3', title: '三级',width:198}
                ,{field: 'detail', title: '明细',width:527}
                ,{field: 'price', title: '单价',width:96}
                ,{field: 'monery', title: '金额', totalRow: true,width:249}
                ,{field: 'remark', title: '备注'}
            ]]

            ,request: {   //如果无需自定义请求参数，可不加该参数
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {   //如果无需自定义数据响应名称，可不加该参数
                countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            ,done : function(res, curr, count){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
                var temp = 0;
                for (var i = 0; i < res.rows.length; i++ ) {
                    temp += res.rows[i].monery
                }

                console.log(temp)

                $('#shouYi').html(temp)

                merge(res);
            }
        });





        table.render({
            elem: '#tableList2'
            ,url: '/json/amoeba.json'
            ,skin: 'row'
            ,even: true
            ,cols: [[
                {field: 'level2', title: '二级'}
                ,{field: 'level3', title: '三级'}
                ,{field: 'detail', title: '明细'}
                ,{field: 'price', title: '单价'}
                ,{field: 'monery', title: '金额'}
                ,{field: 'remark', title: '备注'}
            ]]
            , page: true
            ,request: {   //如果无需自定义请求参数，可不加该参数
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {   //如果无需自定义数据响应名称，可不加该参数
                countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            ,done : function(res, curr, count){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })

                $('.layui-table .layui-table-cell > span').css({'font-weight': 'bold'});//表头字体样式
                $('th').css({'background-color': '#5792c6', 'color': '#fff','font-weight':'bold'})
                $('th:gt(5)').hide();//表头隐藏的样式
                $('.layui-table-page').css('margin-top','40px');//页码部分的高度调整


            }
        });



        var $ = layui.$, active = {
            reload:function(){

                table.reload('tableList', {
                    where: {

                    }
                });
            },

        }

        $('.layui-col-md12 .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.select .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        form.on('select(changType)', function(data){
            $("#brand1").hide()
            $("#brand2").hide()
            if (data.value == '租赁') {
                $("#brand1").show()
            }
            if (data.value == '折旧') {
                $("#brand2").show()
            }
        })

        $("#add").click(function(){
            $("#brand1").hide()
            $("#brand2").hide()

            layer.open({
                type: 1 ,				//Page层类型
                area: ['30%', '60%']
                ,title: '新增'
                ,shade: 0.6 			//遮罩透明度
                ,maxmin: true 			//允许全屏最小化
                ,anim: 1 				//0-6的动画形式，-1不开启
                ,content: $('#addDivID')
                ,success: function(){

                    form.render();
                }

            });
        })

        /**  data:{itemName:"12",startDate:'2019-09-20'},
         * 通用表单提交(AJAX方式),totalMoney:100,startDate:'2019-09-20',dueDate:'2019-09-20'
         */
        form.on('submit(addForm)', function () {

            $("#subBtn").attr("disabled",true);
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath }/forkli/add.do',
                data:$('#addFormID').serialize(),
                cache:false,
            }).done(
                function(res) {
                    if (res > 0) {
                        toastr.success('新增成功！');
                        setTimeout(function(){
                            location.reload();
                        },1000);
                    }
                }
            ).fail(
                function() {
                    toastr.error('新增失败！');
                    setTimeout(function(){
                        location.reload();
                    },1000);
                }
            )
            return false;
        })


    });




    function merge(res) {


        var data = res.rows;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['level1','level2'];//需要合并的列名称
        var columsIndex = [0,1];//需要合并的列索引值

        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
            for (var i = 1; i < res.rows.length; i++) { //这里循环表格当前的数据
                var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

                if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                        $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//当前行隐藏
                        $(this).css("display", "none");
                    });
                }else {
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                }
            }
            mergeIndex = 0;
            mark = 1;
        }
    }

</script>
</body>

</html>

